material-tableで列のデータの最小幅を定義する

#Material-UI

#material-table

若槻龍太

2020.09.20

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、CX事業本部の若槻です。

Material-UI向けのテーブルコンポーネントであるmaterial-tableでは、列定義やデータの状況に応じて、文字列長の長いデータは列内で改行されて表示されることがあります。

今回は、データがある程度の文字列長までは改行されないように、列のデータの最小幅を設定する方法を確認してみました。

有効だった方法

次のようにMaterialTableコンポーネントのcolumnsで、最小幅を設定したい列の定義にheaderStyle: {minWidth: <最小幅>}を追加することにより、データ長が<最小幅>までであれば改行されないようにすることができました。

      <MaterialTable
        columns={[
          {
            title: '商品名',
            field: 'itemName',
            filtering: false,
            headerStyle: {
              minWidth: 150,
            },
          },
          // other columns
        ]}
        // other props
      />

PC、モバイルいずれからの閲覧でも、テーブル幅によらず最小幅以内のデータであれば改行されなくなりました。

PC
モバイル

データ長が最小幅を超えた場合は改行されます。

惜しかった方法

次のようにwidth: <最小幅>のように指定をした場合は、

      <MaterialTable
        columns={[
          {
            title: '商品名',
            field: 'itemName',
            filtering: false,
            width: 150,
          },
          // other columns
        ]}
        // other props
      />

PCからの閲覧時など画面幅が広い時は改行されませんが、

サイドバーメニューを開いたりモバイルから閲覧したりなど、テーブル幅が狭くなると改行されてしまう動作となりました。